<template>
  <div class="main">
    <el-card class="pay-info">
      <div class="txt1">
        商品已拍下，等待买家付款
        <el-button type="primary" plain>项目订单</el-button>
      </div>
      <div class="txt2">
        如买家未在<span>13分04秒</span> 内付款，订单将按自动关闭。
      </div>
      <div class="txt3">买家备注：-</div>
      <div>
        <el-steps :active="1">
          <el-step title="提交订单"></el-step>
          <el-step title="买家付款"></el-step>
          <el-step title="待收货"></el-step>
          <el-step title="待使用"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>
      </div>
    </el-card>
    <el-card class="order-details" style="margin: 10px 0">
      <div class="title">订单信息</div>
      <div class="order-info">
        <div class="left-info">
          <div class="s-tit">收货人信息</div>
          <p>
            <span>收货人:</span>
            xxx
          </p>
          <p>
            <span>联系电话:</span>
            1366666666
          </p>
          <p>
            <span>收货地址:</span>
            xxxxxxxxxxxxxxx
          </p>
        </div>
        <div class="right-info">
          <div class="s-tit">订单信息</div>
          <p>
            <span>订单编号：</span>
            xxx
          </p>
          <p>
            <span>下单账号：</span>
            1366666666
          </p>
          <p>
            <span>下单时间：</span>
            xxxxxxxxxxxxxxx
          </p>
          <p>
            <span>订单类型：</span>
            xxxxxxxxxxxxxxx
          </p>
          <p>
            <span>订单状态：</span>
            xxxxxxxxxxxxxxx
          </p>
        </div>
      </div>
    </el-card>
    <el-card class="order-table" style="margin: 10px 0">
      <div class="title">商品信息</div>
      <el-table :data="tableData"  :header-cell-style="{
        background: '#f5f7fa',
        color: '#000000',
      }" style="margin-top:20px;">
        <el-table-column prop="date" label="项目信息">
        </el-table-column>
        <el-table-column prop="name" label="售价">
        </el-table-column>
        <el-table-column prop="address" label="购买项"> </el-table-column>
        <el-table-column prop="address" label="赠送项"> </el-table-column>
      </el-table>
      <p>商品总价：￥200.00</p>
      <p>运费：￥0.00</p>
      <p style="font-size:18px;color:rgba(212, 48, 48, 1);">应付款：￥355.60</p>
    </el-card>
    <el-card class="btn">
        <el-button plain>返回</el-button>
    </el-card>
  </div>
</template>

<script>
import { queryOrderDetail } from "@/api/order";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      orderId: null,
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getOrderDetail() {
      const res = await queryOrderDetail(this.orderId);
      console.log(res);
    },
  },
  created() {
    this.orderId = Number(this.$route.query.orderId);
    this.getOrderDetail();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.pay-info {
  .txt1 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
  }
  .txt2 {
    color: rgba(80, 80, 80, 0.65);
    font-size: 14px;
    margin-bottom: 10px;
    span {
      color: rgba(255, 87, 51, 1);
    }
  }
  .txt3 {
    font-size: 14px;
    margin-bottom: 12px;
  }
}
.title {
  position: relative;
  font-size: 18px;
  color: rgba(80, 80, 80, 1);
  padding-left: 10px;
}
.title::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: rgba(24, 144, 255, 1);
}
.title::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 90px);
  height: 1px;
  background: rgba(232, 232, 232, 1);
}
.order-info {
  display: flex;
  .left-info,
  .right-info {
    padding: 40px;
    flex: 1;
    .s-tit {
      font-size: 14px;
      color: rgba(80, 80, 80, 1);
      font-weight: bold;
    }
    p {
      color: rgba(80, 80, 80, 1);
      font-size: 14px;
      span {
        color: #c9c6c6;
      }
    }
  }
}
.order-table{
    p{
        text-align: right;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }
}
.btn{
    position: relative;
   padding: 20px 0;
    .el-button{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    }
}
</style>